<script setup lang="ts">
const { info } = defineProps(['info'])

</script>

<template>
<van-swipe-cell>
    <div class="order-item">
        <div class="cinema">{{ info.cinemaNamePinia }} <img src="../../assets/imgs/mine/a63.png"></div>
        <div class="movies">
            <img :src="info.img">
            <div class="movies-order">
                <div class="movies-name">{{info.movieName}} {{info.seatList.length}}张</div>
                <div class="order-detail">
                    <div>{{info.date}} {{ info.time }}</div>
                    <div>{{info.hall}} 
                        <span v-for="(el,index) in info.seatList" :key="index">
                            {{ el.row }}排{{ el.col }}座
                        </span>
                    </div>
                </div>
            </div>
            <div class="del-btn-box">
                <div class="del-btn">评价影片</div>
            </div>
        </div>
        <div class="price">总价：{{ info.totalPrice }}元</div>
    </div>
    <template #right>
        <van-button square text="删除" type="danger" class="delete-button"/>
    </template>
</van-swipe-cell>
</template>

<style lang="scss" scoped>
.order-item{
    color: #828282;
    font-size: 13px;
    border-bottom: #d7d7d7 1px solid;
    border-top: #f6f6f6 4vw solid;
    
    .cinema{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100vw;
        height: 10vw;
        padding: 0 4vw;
        box-sizing: border-box;
        border-top: #d7d7d7 1px solid;

        img{
            width: 2vw;
        }
    }
    .movies{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 92vw;
        margin: 0 auto;
        padding: 3vw 0;
        box-sizing: border-box;
        border-top: #ececec 1px solid;
        border-bottom: #ececec 1px solid;

        img{
            width: 20vw;
            height: 26vw;
        }
        .movies-order{
            width: 50vw;
            height: 24vw;
            display: flex;
            flex-wrap: wrap;
            align-content: space-between;

            .movies-name{
                width: 50vw;
                color: #222222;
                font-size: 16px;
                font-weight: bold;
            }
            .order-detail{
                line-height: 7vw;

                div{
                    width: 50vw;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
            }
        }
        .del-btn-box{
            width: 18vw;
        
            .del-btn{
                color: #fff;
                font-size: 12px;
                width: 18vw;
                height: 7vw;
                line-height: 7vw;
                text-align: center;
                border-radius: 4vw;
                background-color: #fe4d48;
            }
        }
    }
    
    .price{
        width: 100vw;
        height: 10vw;
        padding: 0 4vw;
        box-sizing: border-box;
        display: flex;
        align-items: center;
    }
}
.delete-button{
    height: 52.5vw;
    margin-top: 4vw;
}
</style>